<template>
  <div class="dropdown" ref="DropDownRef">
    <a href="#" class="btn btn-outline-light my-2" @click.prevent="clickShow">你好 {{
      title
    }}</a>
    <ul
      class="dropdown-menu"
      aria-labelledby="dropdownMenuButton1"
      :style="{ display: 'block' }"
      v-if="showIs"
    >
      <slot></slot>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import useClickOutside from '../hooks/useClickOutside'
export default defineComponent({
  name: 'DropDown',
  props: {
    title: {
      type: String
    }
  },
  setup () {
    const showIs = ref(false)
    const clickShow = () => {
      showIs.value = !showIs.value
    }
    const DropDownRef = ref<HTMLElement | null>(null)
    const clickShowis = useClickOutside(DropDownRef)
    watch(clickShowis, () => {
      console.log('数据改变了')
      if (showIs.value && clickShowis.value) {
        showIs.value = false
      }
    })
    return {
      showIs,
      clickShow,
      DropDownRef
    }
  }
})
</script>

<style></style>
